<template>
  <div class="container">
    <h1>404</h1>
    <p>找不到此页面</p>
    <div class="glitch" :data-text="errorCode">{{ errorCode }}</div>
  </div>
</template>

<script>
export default {
  name: 'NotFound',
  data() {
    return {
      errorCode: '404 Not Found',
    }
  },
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-size: 10em;
  letter-spacing: 0.1em;
  margin-top: 0;
}

p {
  font-size: 2em;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

.glitch {
  position: relative;
  display: inline-block;
  animation: glitch 1s linear infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(44px, auto, 56px, auto);
  backface-visibility: hidden;
  overflow: hidden;
}

.glitch::before {
  text-shadow: -2px 0 #ff00cc;
  animation: glitch-1 1s linear infinite;
}

.glitch::after {
  text-shadow: 2px 0 #00ffff;
  animation: glitch-2 1.5s linear infinite;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-5px, 5px);
  }
  40% {
    transform: translate(5px, -5px);
  }
  60% {
    transform: translate(-5px, -5px);
  }
  80% {
    transform: translate(5px, 5px);
  }
  to {
    transform: translate(0);
  }
}

@keyframes glitch-1 {
  0% {
    clip: rect(32px, auto, 36px, auto);
  }
  20% {
    clip: rect(38px, auto, 54px, auto);
  }
  40% {
    clip: rect(28px, auto, 8px, auto);
  }
  60% {
    clip: rect(8px, auto, 58px, auto);
  }
  80% {
    clip: rect(18px, auto, 46px, auto);
  }
  to {
    clip: rect(44px, auto, 56px, auto);
  }
}

@keyframes glitch-2 {
  0% {
    clip: rect(12px, auto, 60px, auto);
  }
  20% {
    clip: rect(32px, auto, 14px, auto);
  }
  40% {
    clip: rect(6px, auto, 10px, auto);
  }
  60% {
    clip: rect(50px, auto, 28px, auto);
  }
  80% {
    clip: rect(6px, auto, 10px, auto);
  }
  to {
    clip: rect(44px, auto, 56px, auto);
  }
}
</style>
